<template>
	<div class="ShortRules">
		<h1 class="ShortRules-title">本规则由房东制定</h1>
		<div class="ShortRules-content">
			<div class="sc-item-icon">
				<img class="scii-img" src="../assets/img/images/rules-icon_03.png" />
			</div>
			<div class="sc-item-main">
				<div class="scim-con">入住前{{houseinfo.sum_refunddays}}天的{{houseinfo.check_in_time}}以前取消订单，定金全部退还</div>
			</div>

			<div class="sc-item-icon">
				<img class="scii-img" src="../assets/img/images/rules-icon_03.png" />
				<span class="scii-text">入住前{{houseinfo.sum_refunddays}}天{{houseinfo.check_in_time}}</span>
			</div>
			<div class="sc-item-main sc-item-mr">
				<div class="scim-con scim-conmr">入住前{{houseinfo.sum_refunddays}}天的{{houseinfo.check_in_time}}到入住当天的{{houseinfo.check_in_time}}之 间取消订单，扣除前{{houseinfo.default_chargedays}}天的订金
				</div>
			</div>
			<div class="sc-item-icon">
				<img class="scii-img" src="../assets/img/images/rules-icon_03.png" />
				<span class="scii-text">入住当天{{houseinfo.check_in_time}}</span>
			</div>
			<div class="sc-item-main sc-item-mr">
				<div class="scim-con scim-conmr">入住当天的{{houseinfo.check_in_time}}之后提前退房，扣除未消 费的后{{houseinfo.default_chargedays}}天的订金，订金不足以实际订金为 准。（包括未入住和提前退房两种情况）
				</div>
			</div>

			<div class="sc-item-icon">
				<img class="scii-img" src="../assets/img/images/rules-icon_03.png" />
				<span class="scii-text">退房当天{{houseinfo.check_out_time}}</span>
			</div>
		</div>

		<div class="ShortRules-box">
			<h1 class="ShortRules-title">交易细则</h1>
			<div class="ShortRules-boxtext"> 如果您在入住当天的{{houseinfo.check_in_time}}之后取消订单，扣除入住前{{houseinfo.default_chargedays}}天的订金作为违约金，剩余订金将退还。取消订单和提前退房实际以住多多系统记录为准，额外的服务费用以及押金不计算在内。</div>
		</div>
		<div class="ShortRules-box">
			<h1 class="ShortRules-title">友情提示</h1>
			<div class="ShortRules-boxtext">    入住后如您认为照片与房间实质有太大差异，住多多将对双方提供的证据进行认定，如属实，未入住天数的费用将全额退还。</div>
		</div>

	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "ShortRules",
		data() {
				var that = this;
			return {
				houseId:that.$route.query.houseId,
				houseinfo:[]
			}
		},
		mounted(){
				var that = this;
			that.getInfo()
		},
		computed: {
			...mapGetters([
				'source',
				'version'
			])
		},
		methods:{
			getInfo(){
				var that = this;
				var ajaxSign = {
					"source": that.source,
					"houseId": that.houseId.toString()
				};
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetShortInfo(ajaxData)
				.then(res=>{
					console.log(res)
					that.houseinfo=res.result;
				})
			}
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.ShortRules {
		width: 100%;
		color: #282828;
	}
	
	.ShortRules-title {
		width: 100%;
		font-weight: initial;
		font-size: .35rem;
		line-height: .35rem;
		padding: .31rem .24rem;
		box-sizing: border-box;
		background: #fff;
	}
	
	.ShortRules-content {
		font-size: .28rem;
	}
	
	.sc-item-icon {
		display: flex;
		align-items: center;
		padding: 0 .35rem;
		box-sizing: border-box;
	}
	
	.scii-img {
		display: block;
		width: .33rem;
		height: .33rem;
		margin-right: .4rem;
	}
	
	.scii-text {
		color: #a4a4a4;
	}
	
	.sc-item-main {
		padding: .28rem 0 .28rem .56rem;
		box-sizing: border-box;
		margin: .19rem .35rem .19rem .51rem;
		border-left: 1px solid #08cc77;
	}
	
	.scim-con {
		line-height: .45rem;
		padding: .24rem .26rem;
		box-sizing: border-box;
		background: #f0fdf9;
	}
	
	.sc-item-mr {
		border-color: #cc0808;
	}
	
	.scim-conmr {
		background: #fdf0f0;
	}
	
	.ShortRules-box {
		margin-top: .42rem;
	}
	
	.ShortRules-boxtext {
		padding: 0 .24rem;
		box-sizing: border-box;
		font-size: .28rem;
		line-height: .45rem;
		color: #A4A4A4;
		text-indent: .6rem;
	}
</style>